<template>
  <div class="login-bg">
    <div class="login-box">
      <h3 class="title">登录系统</h3>

      <!-- 表单 -->
      <el-form :model="loginForm" ref="formRef" :rules="rules" size="large" @keyup.native.enter="submitForm">
        <el-form-item label="" prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入账号"
            prefix-icon=""
          >
          </el-input>
        </el-form-item>

        <el-form-item label="" prop="pwd">
          <el-input
            v-model="loginForm.pwd"
            placeholder="请输入密码"
            type="password"
            prefix-icon=""
          >
          </el-input>
        </el-form-item>

        <el-form-item label="" prop="verifyCode">
          <el-row :gutter="20">
          <el-col :span="12">
            <el-input
              v-model="loginForm.verifyCode"
              placeholder="验证码"
            />
          </el-col>
          <el-col :span="12">
            <img :src="verifyData.captcha" style="width:160px;" @click="refreshCode"/>
          </el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-button class="row-btn" type="primary" @click="submitForm">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRaw, getCurrentInstance, onMounted,nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "@/store";

const currentInstance = getCurrentInstance(); //获取main.js中挂载的实例
const { $api, $verify } = currentInstance.appContext.config.globalProperties;

const router = useRouter();
const route = useRoute();
const store = useStore();

const formRef = ref();

const verifyData = ref({});

// 登录参数
const loginForm = ref({
  username: "",//账号
  pwd: "",//密码
  verifyCode:"",//验证码
});

// 校验规则
const rules = reactive({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
  verifyCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});

//渲染加载完后请求
onMounted(() => {
  getVerifyData(0);
});

//获取验证信息
const getVerifyData = (type) => {
  $api.get("v1/admin/login_verify", {type:type}).then((res) => {
    verifyData.value = res.data;
  });
};
//刷新验证码
const refreshCode = () =>{
  getVerifyData(1)
};
// 提交表单
async function submitForm() {
  if (!formRef.value) return;
  await formRef.value.validate((valid) => {
    console.log(valid,loginForm.value,"登录");
    if (valid) {
      loginForm.value.uniqid = verifyData.value.uniqid;
      $api.post("v1/admin/login", loginForm.value,verifyData.value.token).then((res) => {
        console.log(res,"数据");
        if(res.code == 200){
          handleLogin(res.data);
        }else{
          console.log(res.msg,"错误1");
          ElMessage.error(res.msg);
          getVerifyData(1); //重新获取token 并更新 验证码
        }
      }).catch((err)=>{
         ElMessage.error(err,"错误");
        getVerifyData(1); //重新获取token 并更新 验证码
      });
    }
  });
}
//获取用户菜单
// const getMenuList = async () => {
//   await $api.get("v1/login/get/menu", {}).then((res) => {
//     if (res.code == 200) {
//       store.setUserMenus(res.data); //设置菜单缓存
//     }
//   });
// };


// 登录
async function handleLogin(obj) {
  //设置用户登录信息缓存
  store.setLogin({
    token:obj.token,
    user: obj,
  });
  router.push("Home"); 
  // nextTick(()=>{
  //   getMenuList();
  // })
  
}
</script>

<style lang="scss" scoped>
.login-bg {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  background: #f2f6fa;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: brightness(0.6);
  }
}

.login-box {
  position: relative;
  z-index: 1;
  width: 500px;
  box-sizing: border-box;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  .title {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    margin: 10px 0 40px 0;
  }
  .el-form-item {
    &:last-child {
      margin-top: 30px;
    }
  }
  :deep(.el-icon) {
    font-size: 16px;
  }
}

:deep(.el-input--large .el-input__prefix) {
  left: 10px;
}

.row-btn {
  width: 100%;
  font-size: 16px;
}
</style>
